<template>
  <el-dialog custom-class="b-dashboard-add-widget flex flex-col"
             :title="title ? title : 'Add Widget'"
             append-to-body
             lock-scroll
             v-on="$listeners"
             @opened="opened"
             :visible.sync="currentVisible">
    <el-tabs v-model="currentTab"
             class="flex flex-col">
      <el-tab-pane label="New"
                   name="customize"
                   lazy
                   v-if="customize&&!isPublicApi&&!isPeerGroup">
        <BCustomizedWidget :options="buildGadgetOptions"
                           @event:change="onChangeCustomWidget" />
      </el-tab-pane>
      <el-tab-pane label="Widgets List"
                   name="widget"
                   lazy
                   v-if="widget">
        <WidgetTabpane :defaultSelectionRows="value"
                       @updateSelectionRows="updateSelectionRows"
                       :rootBusinessType="currentRootBusinessType"
                       @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Dashboard List"
                   name="dashboard"
                   lazy v-if="dashboard && currentVisible">
        <InternalDashboardTabpane :defaultSelectionRows="value"
                                  :rootBusinessType="currentRootBusinessType"
                                  :device="device"
                                  @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Scorecard List"
                   name="scorecard"
                   lazy v-if="scorecardList && currentVisible">
        <ScorecardTabpane :defaultSelectionRows="value"
                                  :rootBusinessType="currentRootBusinessType"
                                  :device="device"
                                  @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Dataset List"
                   name="dataset"
                   lazy v-if="dataset && currentVisible">
        <DatasetTabpane :defaultSelectionRows="value"
                                  :rootBusinessType="currentRootBusinessType"
                                  :device="device"
                                  @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Bot List"
                   name="bot"
                   lazy v-if="bot && currentVisible">
        <BotTabpane :defaultSelectionRows="value"
                                  :rootBusinessType="currentRootBusinessType"
                                  :device="device"
                                  @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Slicer List"
                   name="slicer"
                   lazy
                   v-if="slicer">
        <SlicerTabpane :defaultSelectionRows="value"
                       @updateSelectionRows="updateSelectionRows"
                       :rootBusinessType="currentRootBusinessType"
                       @event:addSelected="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Widgets List"
                   name="internalWidget"
                   lazy
                   v-if="internalWidget">
        <InternalWidgetTabpane :defaultSelectionRows="value"
                               @updateSelectionRows="updateSelectionRows"
                               :rootBusinessType="currentRootBusinessType"
                               @event:add="onAddSelected" />
      </el-tab-pane>
      <el-tab-pane label="Slicer List"
                   name="internalSlicer"
                   lazy
                   v-if="internalSlicer">
        <InternalSlicerTabpane :defaultSelectionRows="value"
                               @updateSelectionRows="updateSelectionRows"
                               :rootBusinessType="currentRootBusinessType"
                               @event:add="onAddSelected" />
      </el-tab-pane>
    </el-tabs>
    <div class="selected_btn" v-if="!device&&!isAssetsModel">
      <el-badge :value="selectedTotal"
                class="selected_btn_badge">
        <el-button type="primary"
                   @click="handleAddSelect"
                   size="small">{{$t('custom.report.selectedTotal')}}</el-button>
      </el-badge>
    </div>
    <SelectedDialog v-show="selectedDialogShow&&!isAssetsModel"
                    :selectedList.sync="value"
                    :selectedTotal.sync="selectedTotal"
                    ></SelectedDialog>
  </el-dialog>
</template>

<script>
import WidgetTabpane from './widget-tabpane'
import SlicerTabpane from './slicer-tabpane'
import InternalSlicerTabpane from './internal-slicer-tabpane'
import InternalWidgetTabpane from './internal-widget-tabpane'
import InternalDashboardTabpane from './internal-dashboard-tabpane.vue'
import ScorecardTabpane from './scorecard-tabpane.vue'
import DatasetTabpane from './dataset-tabpane.vue'
import BotTabpane from './bot-tabpane.vue'
import BCustomizedWidget from '@/components/storybook/b-customized-widget/index'
import { dashboardGadgetList } from '@/utils/data-json'
import SelectedDialog from './selected-dialog'
export default {
  data () {
    return {
      selectedDialogShow: false,
      // selectedList: [],
      selectedTotal: 0,
      pageHeaderList: ['', 'pageheadergadget', 'pageheadergadgetnexticket']
    }
  },
  name: 'BDashboardAddWidget',
  components: {
    WidgetTabpane,
    SlicerTabpane,
    BCustomizedWidget,
    InternalSlicerTabpane,
    InternalWidgetTabpane,
    InternalDashboardTabpane,
    SelectedDialog,
    ScorecardTabpane,
    DatasetTabpane,
    BotTabpane
  },
  inject: {
    dataFrom:{
      default:''
    },
    pageFrom:{
      default:''
    },
    excludeGadgetType:{
      default:()=>[]
    }
  },
  props: {
    rootBusinessType: String,
    title: String,
    visible: Boolean,
    tab: {
      type: String,
      default: 'customize'
    },
    customize: {
      type: Boolean,
      default: true
    },
    widget: {
      type: Boolean,
      default: true
    },
    slicer: {
      type: Boolean,
      default: true
    },
    internalWidget: {
      type: Boolean,
      default: true
    },
    scorecard: Boolean,
    scorecardList: Boolean,
    dashboard: {
      type: Boolean,
      default: false
    },
    device: {
      type: Boolean,
      default: false
    },
    internalSlicer: {
      type: Boolean,
      default: true
    },
    value: {
      type: Array,
      default: () => ([])
    },
    isAssetsModel: {
      type: Boolean,
      default: false
    },
    dataset: {
      type: Boolean,
      default: false
    },
    bot: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value (value) {
      // this.selectedList = JSON.parse(JSON.stringify(value))
      this.selectedTotal =  this.isPublicApi ? value.length : value.filter(v => v.com&&!this.pageHeaderList.includes(v.com)).length
    }
  },
  computed: {
    currentVisible: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', !!val)
      }
    },
    currentTab: {
      get () {
        return this.tab
      },
      set (val) {
        this.$emit('update:tab', val)
      }
    },
    buildGadgetOptions () {
      return dashboardGadgetList.filter(record => {
        const { group, key, status } = record
        let rule = group !== '' && group !== 'customized' && group !== 'inDev' && key !== ''

        if (!this.$hasPermission('sys:widget:status:in-dev')) {
          rule = rule && status !== 'In-Dev'
        }
        if (!this.$hasPermission('sys:widget:status:published')) {
          rule = rule && status !== 'Published'
        }
        if (!this.$hasPermission('sys:widget:ai')) {
          rule = rule && key !== 'AIChartGadget'
        }
        if (this.scorecard) {
          rule = rule && key === 'scorecardgadget'
        }
        return this.pageFrom==='reportLayout'?rule&&!this.excludeGadgetType.includes(key):rule
      })
    },
    currentRootBusinessType () {
      if (this.rootBusinessType === 'Template') {
        return ['Template']
      }
      if (this.rootBusinessType === 'Custom') {
        return ['Template', 'Custom']
      }

      return ['MSPbots Internal']
    },
    isPublicApi () {
      return this.dataFrom==='publicApi'
    },
    isPeerGroup () {
      return this.dataFrom==='peergroup'
    }
  },
  created(){
    // this.selectedList = JSON.parse(JSON.stringify(this.value))
    this.selectedTotal = this.isPublicApi ? this.value.length: this.value.filter(v=>v.com).length
  },
  methods: {
    updateSelectionRows(rows){
      this.$emit('input', rows)
    },
    opened() {
      // this.selectedList = JSON.parse(JSON.stringify(this.value))
      this.selectedTotal = this.isPublicApi ? this.value.length : this.value.filter(v => !this.pageHeaderList.includes(v.com)&&v.com).length
    },
    onChangeCustomWidget (item) {

      this.$emit('event:open-widget-modal', item)
    },
    onAdd (rows) {
      let arr1 = rows.filter(i => i.com === 'pageheadergadget')
      let arr2 = rows.filter(i => i.com !== 'pageheadergadget')

      this.$emit('input', arr1.concat(arr2))
      this.$emit('select-list', arr1.concat(arr2))
      this.$emit('onAdd')
      this.currentVisible = false
    },
    onAddSelected (rows) {
      if(this.isPublicApi){
        this.$emit('input', rows.map(v=>{
          return {
            resourceId:v.resourceId
          }
        }))
        this.$emit('publicSave')
        this.currentVisible = false
      }else if(this.isPeerGroup){
        this.$emit('input', rows)
        this.$emit('peergroupSave')
        this.currentVisible = false
      }else{
        this.onAdd(rows)
      }
    },
    handleAddSelect(){
      this.selectedDialogShow=!this.selectedDialogShow
    }
  }

}
</script>

<style lang="scss">
.b-dashboard-add-widget.el-dialog {
  width: 90%;
  min-width: 800px;
  height: 80%;
  max-height: 850px;
  margin-top: 10vh !important;
  & > .el-dialog__body {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
    & > .el-tabs {
      flex: 1;
      height: 0;
      position: relative;
      display: flex;
      flex-direction: column;
      & > .el-tabs__header {
        margin-bottom: 0;
      }
      & > .el-tabs__content {
        flex: 1;
        position: relative;
        & > .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
  .selected_btn {
    position: absolute;
    top: 60px;
    right: 20px;
    &_badge {
      .el-badge__content{
        top:-10px!important;
        right:10px!important;
      }
    }
  }
  .selected_dialog {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 100px;
  right: 20px;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 0 10px;
  z-index: 9;
  &_tab {
    width: 100%;
    height: 100%;
    .selected_list {
      &_item {
        padding: 5px 10px;
        height: 50px;
        border-bottom: 1px solid #ccc;
        &_title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-weight: bold;
          font-size: 26px;
          &_text {
            // max-width: 700px;
            font-size: 16px;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // white-space: nowrap;
          }
        }
        &_content {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
}
</style>
